<template>
  <z-paging ref="paging" v-model="data.moneyList" @query="getDetailList" refresher-enabled="false">
    <view class="py-3 px-3">
      <view class="info-card mb-3 yellow-bgc">
        <van-panel>
          <view slot="header">
            <van-cell :border="false">
              <view slot="title">
                <view class="van-cell-text c-text-16">账号总金额（元）</view>
                <view class="c-text-16">{{ data.moneyInfo.amount }}</view>
              </view>
              <view slot="right-icon"> </view>
            </van-cell>
          </view>
          <view>
            <van-grid column-num="2">
              <van-grid-item class="grid-item-1" use-slot>
                <view class="c-text-16">{{ data.moneyInfo.balance }}</view>
                <view>可用金额（元）</view>
              </van-grid-item>
              <van-grid-item class="grid-item-2" use-slot>
                <view class="c-text-16">{{ data.moneyInfo.unBalance }}</view>
                <view>冻结金额（元）</view>
              </van-grid-item>
            </van-grid>
          </view>
        </van-panel>
      </view>
      <view class="info-card blue-bgc">
        <van-panel>
          <view slot="header">
            <van-cell center :border="false">
              <view slot="title">
                <view class="van-cell-text c-text-16">历史提现（元）</view>
                <view class="c-text-16">{{ data.moneyInfo.cashCount }}</view>
              </view>
            </van-cell>
          </view>
          <view>
            <van-grid column-num="2">
              <van-grid-item class="grid-item-1" use-slot>
                <view class="c-text-16">{{ data.moneyInfo.cashingCount }}</view>
                <view>提现中（元）</view>
              </van-grid-item>
              <van-grid-item class="grid-item-2" use-slot>
                <view class="c-text-16">{{ data.moneyInfo.cashMouthCount }}</view>
                <view>本月已提现（元）</view>
              </van-grid-item>
            </van-grid>
          </view>
        </van-panel>
      </view>
      <view class="mt-3">
        <van-row>
          <van-col span="12">
            <text class="font-bold c-text-16">收入明细</text>
          </van-col>
          <van-col span="12">
            <view
              @click="
                () => {
                  data.timeShow = true;
                }
              "
              class="flex flex-justify-end flex-items-center font-bold c-text-16"
            >
              筛选
              <text class="c-text-12" v-if="data.year && data.month">（{{ data.year }}-{{ data.month }}）</text>
              <i class="i-gg:select"></i>
            </view>
          </van-col>
        </van-row>
        <view class="list mt-3">
          <van-panel v-for="(item, index) in data.moneyList" :key="index">
            <view class="px-2 py-2 box-border flex items-center" slot="header" @click="viewDetails(item)">
              <view class="flex-1">
                <image class="w-full h-full" :src="item.businessLogo" />
              </view>
              <view class="flex-auto px-2 box-border">
                <view class="c-text-12">{{ item.orderBusinessName }}</view>
                <view class="c-text-12 c-coolGray">{{ item.createDate }}</view>
              </view>
              <view class="flex-1 text-align-end">
                <view style="color: #e93b3b" class="c-text-16 font-900">+{{ item.userGain }}</view>
                <view class="c-text-12" :style="{ color: filters.splitStateFillter(item.splitState)!.color }">{{ filters.splitStateFillter(item.splitState)!.value }}</view>
              </view>
            </view>
          </van-panel>
        </view>
      </view>
      <van-popup position="bottom" custom-style="height: 40%;" :show="data.timeShow" @close="onClose">
        <van-datetime-picker title="选择日期" @cancel="onClose" type="year-month" :value="data.currentDate" @confirm="onTimeConfirm" />
      </van-popup>
    </view>
  </z-paging>
</template>

<script setup lang="ts">
import UserRequest from '@/request/userRequest';
import { navigate } from '@/utils/navigate';
import Tools from '@/utils/tools';
import filters from '@/utils/filters';

interface IData {
  timeShow: boolean;
  currentDate: string;
  year?: number;
  month?: number;
  moneyInfo: IMoneyManagementInfo;
  pages: {
    pageNo: number;
    pageSize: number;
    totalPage: number;
  };
  moneyList: any;
}

const paging = ref();

const data = reactive<IData>({
  timeShow: false,
  currentDate: '',
  pages: {
    pageNo: 1,
    pageSize: 10,
    totalPage: 0,
  },
  moneyList: [],
  moneyInfo: {
    amount: 0,
    accountState: 0,
    balance: 0,
    cashCount: 0,
    cashDay: 0,
    cashMouthCount: 0,
    cashingCount: 0,
    oldBalance: 0,
    outBalance: 0,
    pmcBalance: 0,
    unBalance: 0,
  },
});

onLoad(() => {
  getMoneyInfo();
});

const onClose = () => {
  data.timeShow = false;
};

//获取账户资金信息
const getMoneyInfo = () => {
  UserRequest.GetMoneyInfo({ hasLoading: true }).then((res) => {
    data.moneyInfo = res.data;
    data.moneyInfo.amount = parseFloat((res.data.balance + res.data.unBalance).toFixed(2));
  });
};

//收入明细详情
const viewDetails = (item: IMoneyManagementList) => {
  navigate({ url: '/subcontract/person/moneyManagement/detail?splitInfoId=' + item.splitInfoId });
};

//获取明细列表
const getDetailList = (pageNo: number, pageSize: number) => {
  let params = {
    beginMonth: '',
    pageNo,
    pageSize,
    hasLoading: true,
  };
  if (data.year && data.month) {
    params.beginMonth = data.year + '-' + data.month;
  }
  UserRequest.GetMoneyDetailList(params)
    .then((res) => {
      paging.value.complete(res.data.list);
    })
    .catch((err) => {
      paging.value.complete(false);
    });
};

//筛选时间
const onTimeConfirm = (event: any) => {
  const { year, month } = Tools.formatTimestampToDate(event.detail);
  data.year = year;
  data.month = Number(month);
  nextTick(() => {
    paging.value.reload();
    onClose();
  });
};
</script>

<style lang="scss" scoped>
.info-card {
  :deep(.van-panel) {
    border-radius: 25rpx !important;
  }

  .grid-item-1 {
    :deep(.van-grid-item__content) {
      color: #fff !important;
      border-bottom-left-radius: 25rpx;
    }
  }

  .grid-item-2 {
    :deep(.van-grid-item__content) {
      color: #fff !important;
      border-bottom-right-radius: 25rpx;
    }
  }

  :deep(.van-cell) {
    color: #fff !important;
    border-top-left-radius: 25rpx;
    border-top-right-radius: 25rpx;
  }
}

.blue-bgc {
  :deep(.van-grid-item__content) {
    background-image: linear-gradient(to bottom right, #45a5ff, #45a5ff) !important;
    color: #fff !important;
  }

  :deep(.van-cell) {
    color: #fff !important;
    background-color: #45a5ff !important;
  }
}

.yellow-bgc {
  :deep(.van-grid-item__content) {
    background-image: linear-gradient(to bottom right, #fbd765, #ffc300) !important;
  }

  :deep(.van-cell) {
    background-image: linear-gradient(to bottom right, #fbd765, #ffc300) !important;
  }
}
</style>
